{% extends 'teacher/base.html' %}
{% load static %}

{% block title %}Student Management - {{ course.course_name }}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/teacher/manage_course_students.css' %}">
{% endblock %}

{% block content %}
{% csrf_token %}
<meta name="course-id" content="{{ course.course_id }}">
<!-- Extra top spacing to avoid base.html elements overlap -->
<div style="height: 35px;"></div>
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="td_fs_36 td_medium">Manage Students - {{ course.course_name }}</h2>
            <div class="header-actions">
                <a href="{% url 'teacher_dashboard' %}" class="td_btn td_style_1 td_type_3 td_radius_10 td_medium dashboard-link me-2">
                    <span class="td_btn_in td_accent_color">
                        <i class="fas fa-arrow-left me-2"></i><span>Back to Dashboard</span>
                    </span>
                </a>
                <button type="button" class="td_btn td_style_1 td_radius_10 td_medium" data-bs-toggle="modal" data-bs-target="#addStudentModal">
                    <span class="td_btn_in td_white_color td_accent_bg">
                        <i class="fas fa-user-plus me-2"></i><span>Add Student</span>
                    </span>
                </button>
            </div>
        </div>

        <!-- Enrolled Students -->
        <div class="card td_radius_10 td_gray_bg_5 mb-4">
            <div class="card-header">
                <h4 class="mb-0 td_fs_24 td_medium">Enrolled Students</h4>
            </div>
            <div class="card-body">
                {% if enrolled_students %}
                    <div class="table-container">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Student ID</th>
                                    <th>Name</th>
                                    <th>Final Exam</th>
                                    <th>Assignments</th>
                                    <th>Quizzes</th>
                                    <th>Attendance</th>
                                    <th>GPA</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for student in enrolled_students %}
                                <tr data-student-id="{{ student.student_id }}">
                                    <td>{{ student.student_id }}</td>
                                    <td>{{ student.full_name }}</td>
                                    <td>
                                        <label class="visually-hidden" for="final_exam_{{ student.student_id }}">Final Exam Grade</label>
                                        <input type="number" class="td_form_field td_medium td_white_bg grade-input" 
                                               id="final_exam_{{ student.student_id }}"
                                               name="final_exam" min="0" max="100" step="0.01"
                                               title="Final Exam Grade">
                                    </td>
                                    <td>
                                        <label class="visually-hidden" for="assignments_{{ student.student_id }}">Assignments Grade</label>
                                        <input type="number" class="td_form_field td_medium td_white_bg grade-input"
                                               id="assignments_{{ student.student_id }}"
                                               name="assignments" min="0" max="100" step="0.01"
                                               title="Assignments Grade">
                                    </td>
                                    <td>
                                        <label class="visually-hidden" for="regular_quiz_{{ student.student_id }}">Quiz Grade</label>
                                        <input type="number" class="td_form_field td_medium td_white_bg grade-input"
                                               id="regular_quiz_{{ student.student_id }}"
                                               name="regular_quiz" min="0" max="100" step="0.01"
                                               title="Quiz Grade">
                                    </td>
                                    <td>
                                        <label class="visually-hidden" for="attendance_{{ student.student_id }}">Attendance Grade</label>
                                        <input type="number" class="td_form_field td_medium td_white_bg grade-input"
                                               id="attendance_{{ student.student_id }}"
                                               name="attendance" min="0" max="100" step="0.01"
                                               title="Attendance Grade">
                                    </td>
                                    <td>
                                        <span class="td_form_field td_medium td_white_bg grade-display" 
                                               id="gpa-display-{{ student.student_id }}"
                                               style="display: inline-block; width: 85px; text-align: center; padding: 6px 4px; background-color: #f8f9fa;">
                                            0.00
                                        </span>
                                        <input type="hidden" name="gpa" id="gpa-{{ student.student_id }}" value="0">
                                    </td>
                                    <td>
                                        <button class="td_btn td_style_1 td_radius_10 td_medium btn-sm save-grades me-1">
                                            <span class="td_btn_in td_white_color td_accent_bg">
                                                <i class="fas fa-save me-1"></i><span>Save</span>
                                            </span>
                                        </button>
                                        <button class="td_btn td_style_1 td_type_2 td_radius_10 td_medium btn-sm remove-student">
                                            <span class="td_btn_in td_white_color td_error_bg">
                                                <i class="fas fa-user-minus me-1"></i><span>Remove</span>
                                            </span>
                                        </button>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <p class="text-center text-muted td_fs_18">No students enrolled in this course</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Add Student Modal -->
<div class="modal fade" id="addStudentModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content td_radius_10">
            <div class="modal-header">
                <h5 class="modal-title td_fs_24 td_medium">Add Student to Course</h5>
                <button type="button" class="btn-close" onclick="closeCustomModal('addStudentModal')" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="student-select" class="form-label td_medium">Select Student</label>
                    <select class="td_form_field td_medium td_white_bg" id="student-select">
                        <option value="">Please select a student...</option>
                        {% for student in students %}
                            {% if student not in enrolled_students %}
                                <option value="{{ student.student_id }}">
                                    {{ student.student_id }} - {{ student.full_name }}
                                </option>
                            {% endif %}
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="td_btn td_style_1 td_type_3 td_radius_10 td_medium" onclick="closeCustomModal('addStudentModal')">
                    <span class="td_btn_in td_accent_color">
                        <span>Cancel</span>
                    </span>
                </button>
                <button type="button" class="td_btn td_style_1 td_radius_10 td_medium" id="add-student-btn">
                    <span class="td_btn_in td_white_color td_accent_bg">
                        <span>Add Student</span>
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/teacher/grade-calculation.js' %}"></script>
<script src="{% static 'js/teacher/manage_course_students.js' %}"></script>
{% endblock %} 